<template>
  <div>
    <h1>watch函数用法</h1>
    <hr />
    <ul>
      <li>{{ count }}</li>
      <li>
        <button @click="add">add</button>
      </li>
      <li>{{ obj }}</li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
/**
 * 作用：基于响应式数据的变化执行回调逻辑，和vue2中的watch的功能完全一致
1. 普通监听
2. 立即执行
3. 深度监听
**使用步骤**
1. 从vue框架中导入`watch`函数
2. 在setup函数中执行watch函数开启对响应式数据的监听
3. watch函数接收三个常规参数
   1. 第一个参数为函数，返回你要监听变化的响应式数据
   2. 第二个参数为响应式数据变化之后要执行的回调函数
   3. 第三个参数为一个对象，在里面配置是否开启立刻执行或者深度监听
 */
export default {
  setup () {
    // 1. 监听简单类型变量
    const count = ref(100)
    // 点击减一 | 修改obj
    const add = () => {
      // count.value--
      obj.value.age = Math.floor(Math.random() * 100 + 1)
    }

    // 监听count变量变化
    watch(() => {
      // 指定监听谁=》那个变量？
      return count.value
    }, (newVal, oldVal) => {
      console.log('count变化了：', newVal, oldVal)
    })

    // 2. 监听复杂类型变量
    const obj = ref({
      name: '小红',
      age: 10
    })

    // 监听obj变量变化
    watch(() => {
      // 指定监听谁=》那个变量？
      return obj.value
    }, (newVal, oldVal) => {
      console.log('obj变化了：', newVal, oldVal)
    }, {
      // 开启深度监控
      deep: true,
      // 页面加载后，默认立即执行一次监听
      immediate: true
    })

    // 需求：监听对象某个属性变化=》只监听age变化
    watch(() => obj.value.age, (newVal) => {
      console.log('age变化了：', newVal)
    })

    return { count, add, obj }
  }
}
</script>

<style lang="scss" scoped>
</style>
